<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style=" height: 600px; width: 800px; margin: 0">
    <div id="container" style="background: rgb(16, 12, 42); height: 100%"></div>
    <div id="app" class="number" style="display: flex;
    justify-content: center;
    align-items: center;"><a @click="test2020()" href="javascript:">{{yearData[0].year}}</a> &nabla; <a @click="test2021()" href=" javascript:">2021</a><button>{{ message }}</button>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option;
        option = {
            color: ['#00f2f1', '#ed3f35'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                textStyle: {
                    color: '#4c9bfd'
                },
                right: '10%'
            },
            grid: {
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                show: true, // 显示边框
                borderColor: '#012f4a', // 边框颜色
                containLabel: true // 包含刻度文字在内
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
                axisLine: {
                    show: false
                },


            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
                splitLine: {
                    lineStyle: {
                        color: '#012f4a' // 分割线颜色
                    }
                }
            },
            series: [{
                name: '新增粉丝',
                data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                type: 'line',
                // 折线修饰为圆滑 
                smooth: false,
            }, {
                name: '新增游客',
                data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                type: 'line',
                smooth: true,
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        // 引入vue 
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                yearData: [{
                    year: "2020", // 年份
                    data: [
                        // 两个数组是因为有两条线
                        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
                    ]
                }, {
                    year: "2021", // 年份
                    data: [
                        // 两个数组是因为有两条线
                        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
                        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
                    ]
                }]
            },
            methods: {
                test2020() {
                    console.log("2020数据调用")
                    option.series[0].data = this.yearData[0].data[0]
                    option.series[1].data = this.yearData[0].data[1]

                    myChart.setOption(option)



                },
                test2021() {
                    console.log("2021数据调用")
                    option.series[0].data = this.yearData[1].data[0]
                    option.series[1].data = this.yearData[1].data[1]

                    myChart.setOption(option)



                }




            },

        })
    </script>
</body>

</html>